<template>
  <div class="section-or-lesson-status">
    <div class="header">
      <i class="el-icon-info" style="font-size: 50px;"></i>
      <span>当前状态：待更新</span>
    </div>
    <el-form label-position="right" label-width="110px">
      <el-form-item label="状态变更为：">
        <el-select v-model="status" placeholder="待更新" style="width: 100%">
          <el-option
            v-for="item in allStatus"
            :key="item.id"
            :label="item.label"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">确定</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { saveOrUpdateLesson, saveOrUpdateSection, getBySectionId, getById } from '@/services/course-section'

export default {
  props: {
    isSection: {
      type: Boolean
    },
    sectionId: {
      type: [Number, String]
    },
    lessonId: {
      type: [Number, String]
    }
  },
  name: 'SectionOrLessonStatus',
  data () {
    return {
      status: 1,
      allStatus: [
        { id: 0, label: '已隐藏' },
        { id: 1, label: '待更新' },
        { id: 2, label: '已更新' }
      ]
    }
  },
  created () {
    // 初始状态
    this.loadStatus()
  },
  methods: {
    async loadStatus () {
      if (this.isSection) {
        const { data } = await getBySectionId(this.sectionId)
        this.status = data.data.status
      } else {
        const { data } = await getById(this.lessonId)
        this.status = data.data.status
      }
    },
    async onSubmit () {
      if (this.isSection) {
        const { data } = await saveOrUpdateSection({
          id: this.sectionId,
          status: this.status
        })
        if (data.code === '000000') {
          this.$message.success('状态更新成功')
          this.$emit('success')
        }
      } else {
        const { data } = await saveOrUpdateLesson({
          id: this.lessonId,
          status: this.status
        })
        if (data.code === '000000') {
          this.$message.success('状态更新成功')
          this.$emit('success')
        }
      }
    },
    onCancel () {
      this.$emit('cancel')
    }
  }
}
</script>

<style lang="scss" scoped>
  .header {
    font-size: 20px;
    color: #606266;
    text-align: center;
    i {
      display: block;
      padding-bottom: 20px;
    }
    span {
      display: block;
      padding-bottom: 20px;
    }
  }
</style>
